<template>
  <div class="main-header">
    <el-row>
      <el-col :span="8" class="main-header-title">
        <div class="grid-content bg-purple-dark">
          <el-link
            href="http://erleizi.com/"
            type="success"
            target="_blank"
            class="main-header-title-link"
          >
            <h2>河图</h2>
          </el-link>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple-dark main-header-nav">
          <router-link to="/recomand">推荐</router-link>
          <router-link to="/recomand">排行</router-link>
          <router-link to="/recomand">歌单</router-link>
          <router-link to="/recomand">歌手</router-link>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    /* 简单的导航，没啥特点，没使用 */
    return {}
  }
})
</script>

<style scoped lang="less">
.main-header {
  height: 64px;
  .main-header-title {
    height: 64px;
    .main-header-title-link {
      height: 64px;
      display: inline-block;
      width: 100%;
      text-align: center;
    }
  }
  .main-header-nav {
    display: flex;
    height: 100%;
    justify-content: space-evenly;
    align-content: center;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(103, 194, 58, 0.6);
    a {
      width: 100%;
      height: 100%;
      line-height: 63px;
      text-align: center;
      font-size: 16px;

      &:hover {
        color: rgb(0, 0, 0);
        border-bottom: 1px solid #000;
      }

      &::after {
        content: '';
        border: none;
      }
    }
  }
}
</style>
